<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width" />
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>我的收藏</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/main.css" />
    <style>
        body {
            /*background-color: #D7D6D5;*/
            background-color: #fff;
        }

        .back1 {
            width: 15px !important;
            height: 24px !important;
            margin-top: 17px;
            margin-left: 25px;
        }

        .test {
            position: relative;
        }

        .lists {
            padding: 8px 15px 15px 10px;
            background-color: #fff;
            margin-bottom: 2px;
        }

        .img_picture {
            width: 100%;
            height: 80px;
            display: inline-block;
            vertical-align: middle;
            border-radius: 5px;
        }
        .img_picture1{
          width: 100%;
          height: 80px;
          z-index: 2;
          position: absolute;
          display: inline-block;
          vertical-align: middle;
          border-radius: 5px;
        }

        .content1 {
            width: 52%;
            float: left;
            height: 80px;
            padding-left:12px;
        }

        .content_title {
            color: #000;
            font-size: 18px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .content_wenzi {
            font-size: 14px;
            padding-top: 5px;
            color: #A7A7A7;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .shuoming {
            font-size: 14px;
            position: absolute;
            bottom: 0px;
            color: #A7A7A7;
        }

        .right {
            right: 0px;
        }

        .aui-title {
            padding-top: 8px;
        }

        .li {
            position: absolute;
            width: 30px;
            height: 14px;
            font-size: 13px;
            top: 23px;
            right: 32px;
        }

        #aui-header {
            padding: 10px 0px;
            font-size: 19px;
        }

        .footer {
            position: fixed;
            bottom: 0px;
            height: 46px;
            line-height: 46px;
            width: 100%;
            background-color: #fff;
            border-top: 2px solid #d9d8d7;
            font-size: 17px;
            z-index:10;

        }

        .child {
            width: 60%;
            float: left;
            text-align: center;
        }

        .child1 {
            width: 40%;
            float: left;
            text-align: center;
            line-height: 46px;
            background: #D9D8D7;
            border: none;
            height: 46px;
            border-radius: 0px;
        }

        .childact {
            color: #EA5718;
        }

        .radio {
            float: left;
            width: 19px;
            height: 19px;
            margin-left: 10px;
            margin-right: 25px;
            margin-top: 35px;
        }

        .all {
            width: 19px;
            height: 19px;
            position: fixed;
            left: 25px;
            bottom: 13px;
        }


        .segmenting {
            position: absolute;
            width: 1px;
            height: 34px;
            background: url(../image/split.png) no-repeat;
            left: 50%;
            top: 5px;
        }

        .daoqi {
            color: #fff;
            background-color: #C3C3C3;
            height: 30px;
            line-height: 30px;
            font-size: 13px;
            text-align: center;
            position: absolute;
            margin-top: 10px;
            width: 100%;
        }
        /*kong*/
        .box {
            height: 7px;
            background: #c3c3c3;
            margin-top: 11px;
        }

        .cat {
            margin: 150px 0px 0px 0px;
            text-align: center;
        }

        .top_login {
            height: 28px;
            line-height: 28px;
            background-color: #FFAD20;
            font-size: 13px;
            padding-left: 26px;
            padding-right: 20px;
            margin-top: 7px;
        }

        .outcat{
          width: 410px;
          height: auto;
          display: block;
          margin: 0 auto;
        }
    </style>
</head>

<body>
    <div id="vm" v-cloak>
        <div class="top_login" v-if="!islogin">
            <div style="float:left">登录账号可同步收藏记录</div>
            <div style="float:right;color:#fff" onclick="loginwin()">立即登录</div>
            <div class="aui-clearfix"></div>
        </div>
        <div v-if="iskong">
            <div class="box">
            </div>
            <div class="cat">
                <img src="../image/few/outcat.png" alt="" class="outcat">
                <div class="zi">
                    目前没有收藏的视频
                </div>
            </div>
        </div>


        <div class="lists" v-bind:class="{collectlistul: isActive}" v-else>
            <div v-for="(item,key) in allcollectlist" >
                <div v-bind:class="{collectlist: isActive}">
                    <div class="choise">
                        <img src="../image/48.png" alt="" v-if="item.isweixuan" class="radio" v-on:click="cancelcollect(item)">
                        <img src="../image/114.png" alt="" v-else class="radio" v-on:click="cancelcollect(item)">
                    </div>
                    <div style="position:relative" @click="Openjieshao(item)" >

                        <div class="lists">
                          <div style="float:left;  width: 46%; position:relative">
                            <!-- <span class="videotype" :class="{videotypedaka:item.video_type==3,videotypemianfei:item.video_type==1}">{{videotype(item.video_type)}}</span> -->
                                    <img  v-if="yidaoqi(item.endtime2)" src="../image/daoqi.png" alt="" class="img_picture1">
                                    <img v-if="item.status!==1||item.isonline==2||item.isdelete==1" src="../image/xiajia.png" alt="" class="img_picture1">
                                    <img v-bind:src=item.img alt="" class="img_picture">
                            </div>
                            <div class="content1 test">
                                <p class="content_title">{{item.video_name}}</p>
                                <p class="content_wenzi">{{item.video_introduce_small}}</p>
                                <div class="shuoming">{{item.addtime}}</div>
                            </div>
                        </div>
                        <!-- <div class="daoqi" >视频已下架</div>
                        <div v-else>
                          <div class="daoqi">视频已到期</div>
                        </div> -->

                        <div class="aui-clearfix"></div>
                    </div>

                </div>
            </div>
        </div>




        <footer class="footer" v-if="isActive && !iskong" id="footer">
            <div class="child" v-if="isweixuanflag" @click="allchoice()">
                <img src="../image/48.png" alt=""  class="all" >
                全&nbsp;&nbsp;选
            </div>
            <div class="child" v-else @click="allcancelchoice()">
                <img src="../image/114.png" alt=""  class="all" >
                全&nbsp;&nbsp;选
            </div>
            <button class="child1" v-if="isbukedianji" diabled v-bind:class="{childact: ishavecancle}">
                取消收藏({{collectnum}})
            </button>
            <button class="child1" v-else v-bind:class="{childact: ishavecancle}" v-on:click="delcollbox()">
                取消收藏({{collectnum}})
            </button>
        </footer>

        <div class="mask mask3 hide">
            <div class="bombbox">
                <div class="bombbox-title">删除所选视频</div>
                <div class="aui-row bombbox-foot">
                    <div class="segmenting"></div>
                    <div class="aui-col-xs-6 aui-font-size-15 cancel">取消</div>
                    <div class="aui-col-xs-6 aui-font-size-15 sure" v-on:click="deletecollect()">确定</div>
                </div>
            </div>
        </div>


    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/config.js"></script>
<script type="text/javascript" src="../script/rest.js"></script>
<script type="text/javascript" src="../script/vue.2.5.js"></script>
<script type="text/javascript" src="../script/zepto.js"></script>
<script type="text/javascript" src="../script/common.js"></script>
<script type="text/javascript" src="../script/faskclick.js"></script>
<script type="text/javascript">
    var uid, session;

    var vm = new Vue({
        el: '#vm',
        data: {
            islogin:false,
            iskong: false,
            isActive: false,
            allcollectlist: [],
            isweixuan: true,
            collectnum: 0,
            deletecollectid: [],
            isweixuanflag: true,
            ishavecancle: false,
            page: 1,
            isbukedianji:true

        },
        created: function() {
            var _this = this;
            apiready = function() {
                uid = $api.getStorage('uid');
                session = $api.getStorage('session');

                if(uid){
                  _this.islogin=true;
                }else{
                  _this.islogin=false;
                }
                _this.init();
                api.parseTapmode();
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }

                api.addEventListener({
                    name: 'edit'
                }, function(ret, err) {
                    if (ret) {
                        if (ret.value.edit == 'bianji') {
                            _this.isActive = true
                        } else {
                            _this.isActive = false
                        }
                    }
                });
            }
        },
        methods: {
            init: function() {
                var _this = this;
                api.addEventListener({
                    name: 'scrolltobottom',
                    extra: {
                        threshold: 80 //设置距离底部多少距离时触发，默认值为0，数字类型
                    }
                }, function(ret, err) {
                  if(_this.iskong){
                    _this.page = _this.page
                  }else{
                    _this.page = _this.page + 1;
                    _this.gefavoritelist();
                  }
                });
                api.addEventListener({
                    name: 'collectcaozuo'
                }, function(ret, err){

                  _this.allcollectlist = []
                  _this.gefavoritelist();

                });

                _this.gefavoritelist();
            },
            yidaoqi(daoqitime){
                if (Date.parse(new Date())/1000>daoqitime) {
                  return true;
                }else {
                  return false
                }
            },
            Openjieshao: function(item) {
              if (item.status!==1||item.isonline==2||item.isdelete==1) {
                return false;
              }
              if (Date.parse(new Date())/1000>item.endtime2) {
                return false
              }
              var _this = this;
              if(uid){
                var data1={
                  video_id: item.id,
                  uid: uid
                }
              }else{
                var data1={
                  video_id: item.id,
                  uid: ''
                }
              }
              new rest().get('getDetail').datae(data1).success(function(res) {
                  console.log(JSON.stringify(res))
                  if (res.flag == 1) {
                    if(item.isonline=='2'){
                      api.toast({
                          msg: '该视频已下架',
                          duration: 2000,
                          location: 'middle'
                      });
                    }else{
                      _this.videodetial = res.msg;
                      apicmmon.openwin('videodetail_win', 'VIP/videodeail.html', {
                            videoid: item.id
                      })
                    }
                  }
                  else{
                    api.toast({
                        msg: '视频不存在',
                        duration: 2000,
                        location: 'middle'
                    });
                  }
              }).error(function(err) {
                  console.log(JSON.stringify(err))
              }).run()

            },
            videotype: function(res) {
                if (res == 2) {
                    return 'VIP'
                } else if (res == 3) {
                    return '大咖'
                } else {
                    return '免费'
                }
            },
            gefavoritelist(){
              var _this = this;
              if(uid){
                new rest().get('getFavoriteList').datae({
                        uid:uid,
                        page:_this.page,
                        psize:20
                    }).success(function(res) {
                        if (res.flag == 1) {
                            if (res.msg.length == 0) {
                              if(_this.page==1){
                                _this.iskong = true;
                              }else{
                                _this.iskong = false;
                                _this.page = _this.page;
                                 api.toast({
                                     msg: '没有更多了',
                                     duration: 2000,
                                     location: 'middle'
                                 });
                              }
                            } else {

                              for (i = 0; i < res.msg.length; i++) {
                                  res.msg[i]['isweixuan'] = true;
                              }
                              _this.iskong = false;
                              _this.allcollectlist = _this.allcollectlist.concat(res.msg);
                            }

                        }
                        console.log(JSON.stringify(res))
                    }).error(function(err) {
                        console.log(JSON.stringify(err))
                    }).run()
              }

            },
            cancelcollect: function(zixun) {
                var _this = this;
                // 判断是否选中，将选中的资讯id加入数组中，一起取消收藏
                if (zixun.isweixuan) {
                    zixun.isweixuan = false;
                    _this.collectnum = _this.collectnum + 1;
                    _this.deletecollectid.push(zixun.id)
                    _this.ishavecancle = true;
                    // 全选
                    if(_this.collectnum==_this.allcollectlist.length){
                      _this.isweixuanflag = false;
                    }
                    _this.isbukedianji=false;
                } else {
                    zixun.isweixuan = true;
                    _this.collectnum = _this.collectnum - 1;

                    if (_this.collectnum <= 0) {
                        _this.collectnum = 0;
                        _this.ishavecancle = false;
                        _this.isweixuanflag = true;
                        _this.isbukedianji=true;
                    } else {
                        _this.ishavecancle = true;
                        _this.isbukedianji=false;
                    }
                    var index = _this.deletecollectid.indexOf(zixun.id);
                    if (index > -1) {
                        _this.deletecollectid.splice(index, 1);
                    }
                }

            },
            delcollbox: function() {
                var _this = this;
                if (_this.deletecollectid.length != 0) {
                    $('.mask3').removeClass('hide');
                    api.sendEvent({
                        name: 'clickcancelcollect',
                    });
                } else {
                    api.toast({
                        msg: '请选择要删除的资讯',
                        duration: 2000,
                        location: 'middle'
                    });

                }
            },
            deletecollect: function() {
                var _this = this;
                for (i = 0; i < _this.deletecollectid.length; i++) {

                    new rest().get('unFavorite').datae({
                        video_id: _this.deletecollectid[i],
                        _uid: uid,
                        session: session
                    }).success(function(res) {
                        if (res.flag == 1) {
                            $('.mask3').addClass('hide');
                            api.sendEvent({
                                name: 'clickcancelcollect1',
                            });
                            _this.page=1;
                            _this.allcollectlist =[];
                            _this.gefavoritelist();
                            // _this.isActive = false;
                            _this.collectnum = 0;
                            api.sendEvent({
                                name: 'delecollect',
                            });
                        }
                    }).error(function(err) {
                        console.log(JSON.stringify(err))
                    }).run()
                }

            },

            allchoice: function() {
                var _this = this;
                _this.isweixuanflag = false;
                for (i = 0; i < _this.allcollectlist.length; i++) {
                    _this.allcollectlist[i]['isweixuan'] = false;
                    _this.deletecollectid.push(_this.allcollectlist[i].id)
                    console.log(JSON.stringify(_this.deletecollectid))

                }
                _this.collectnum = _this.allcollectlist.length;
                _this.ishavecancle = true;
                _this.isbukedianji=false;

            },
            allcancelchoice: function() {
                var _this = this;
                _this.isweixuanflag = true;
                for (i = 0; i < _this.allcollectlist.length; i++) {
                    _this.allcollectlist[i]['isweixuan'] = true;
                }
                _this.deletecollectid = [];
                _this.collectnum = 0;
                _this.ishavecancle = false;
                _this.isbukedianji=true;


            },
        }
    })

    function loginwin() {
        api.openFrame({
            name: 'login_introduction',
            url: './myself/login_introduction.html',
            rect: {
                x: 0,
                y: 0,
                w: 'auto',
                h: 'auto'
            },
            bounces: false,
            bgColor: 'rgba(0,0,0,0.7)',
            vScrollBarEnabled: true,
            hScrollBarEnabled: true
        });
    }
    $('.cancel').on('click', function() {
        $('.mask').addClass('hide');
        api.sendEvent({
            name: 'clickcancelcollect1',
        });
    })


</script>

</html>
